<template>
  <div class="box">
    <header>
      <van-nav-bar left-arrow title="绑定信息" @click-left="fant">
      </van-nav-bar>
    </header>
    <main>
      <div class="Id_box">
        <div class="Id_card">
          <p>身份证</p>

          <div class="Id_boxs">

              <div class="zcard" @click="openFileUpload"  @change="handleFileChange" ref="imageBox">
                <img
                  v-if="imageUrl"
                  :src="icard"
                  alt="ID Card"
                  class="uploaded-image"
                  @load="checkImageSize"
                />
                <div v-else class="placeholder"></div>
                <input
                  type="file"
                
                  ref="fileInput"
                  style="display: none"
                  accept="image/*"
                />
              </div>
            <!-- 右侧提示信息 -->  
              <div class="status-message" v-if="message">{{ message }}</div> 
              </div> 
        </div>



        <div class="Id_card">
          <p>银行卡</p>
          <div class="fcard" @click="openFileUploads">
            <img
              v-if="imageUrls"
              :src="bcard"
              alt="Uploaded Image"
              class="uploaded-image"
            />
            <div v-else class="placeholder"></div>
            <input
              type="file"
              @change="handleFileUpload"
              ref="fileInputs"
              style="display: none"
              accept="image/*"
            />
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue';
const imageUrl = ref(""); // 存储图片的URL
import Tesseract from 'tesseract.js';
const message = ref('');  
const imageBox = ref(); 
const imageUrls = ref(""); // 存储图片的URL
const fileInput = ref(); // 引用文件输入元素
const fileInputs = ref(); // 引用文件输入元素
import { useRouter } from "vue-router";
const router = useRouter();
import icard from '../assets/images/Idcard.png'
import bcard from '../assets/images/bankcard.png'
const fant = () => {
  router.go(-1);
};

// 打开文件选择框
function openFileUpload() {
  fileInput.value.click();
}

// 打开文件选择框
function openFileUploads() {
  fileInputs.value.click();
}

// 初始化时获取盒子尺寸（如果需要）  
    onMounted(() => {  
      nextTick(() => {  
        const boxRect = imageBox.value.getBoundingClientRect();  
        const boxWidth = boxRect.width;  
        const boxHeight = boxRect.height;  
        // 你可以将盒子尺寸存储为响应式变量，但在这个示例中我们直接在比较时使用  
      });  
    });  

    // 检查图片尺寸  
    function checkImageSize(event:any) {  
      const img = event.target;  
      const boxWidth = imageBox.value.offsetWidth;  
      const boxHeight = imageBox.value.offsetHeight;  
  
      if (img.width < boxWidth || img.height < boxHeight) {  
        message.value = '√';  
      } else if (img.width === boxWidth && img.height === boxHeight) {  
        message.value = '√';  
      } else {  
        // 图片大于盒子，但这里只检查小于和等于的情况  
        message.value = 'X';  
      }  
    }  

function handleFileChange(e: any) {
  const file = e.target.files[0];
  if (file) {
    // 这里为了简化，我们直接创建了一个URL对象
    // 在实际应用中，你可能需要上传文件到服务器并获取URL
    imageUrl.value = URL.createObjectURL(file);
  }
}

function handleFileUpload(e: any) {
  const file = e.target.files[0];
  if (file) {
    // 这里为了简化，我们直接创建了一个URL对象
    // 在实际应用中，你可能需要上传文件到服务器并获取URL
    imageUrls.value = URL.createObjectURL(file);
  }
}
</script>

<style  scoped>
.box {
  width: 100vw;
  height: 100vh;
}

.Id_box {
  width: 100%;
  height: 90%;
  margin-left: 30px;
}

.Id_card {
  width: 100%;
  height: 30%;
}

.Id_card p {
  width: 100%;
  height: 30px;
}

.Id_boxs
{
    display: flex;
}

.zcard {
  width: 80%;
  height: 180px;
  /* margin-left: 20px; */
  background: url("../assets/images/id_card_front.png") no-repeat 0 0 /100% 100%;
}

.zcard img
{
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.status-message
{
    margin-left: 20px;
    font-weight: 800;
    color: green;
    font-size: 20px;
    
}

.fcard {
  width: 80%;
  height: 180px;
  background: url("../assets/images/bank_card_front.png") no-repeat 0 0 /100% 100%;
}

.fcard img
{
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
</style>